<template>
  <div class="article-container">
    <!-- 标题部分 -->
    <header class="article-header">
      <h1 class="article-title text-style">{{ title }}</h1>
      <div class="article-meta">
        <span class="article-update-time text-style">更新时间：{{ updateTime }}</span>
        <span class="article-source text-style">内容来源：{{ source }}</span>
      </div>
    </header>

    <!-- 正文部分 -->
    <section class="article-content">
      <p>{{ content }}</p>
    </section>
  </div>
</template>

<script setup lang="ts">
defineProps({
  title: {
    type: String,
    required: true,
  },
  updateTime: {
    type: String,
    required: true,
  },
  source: {
    type: String,
    required: true,
  },
  content: {
    type: String,
    required: true,
  },
})
</script>

<style scoped>
.article-container {
  width: 100%;
  margin: 20px auto;
  font-family: Arial, sans-serif;
}

.article-title {
  font-size: 20px;
}

.article-source {
  display: flex;
  justify-content: flex-end;  /* 使内容靠右对齐 */
  width: 55%;  /* 确保容器宽度填满父容器 */
}

.text-style {
  font-family: "Source Han Sans-FVS Medium";
  color: rgb(255, 240, 177);
  writing-mode: horizontal-tb;
  letter-spacing: 2px;
  text-orientation: upright;
  user-select: text;
}

.article-meta {
  display: flex;
  font-size: 14px;
}

.article-content {
  font-size: 14px;
  line-height: 1.3;
}
</style>
